<template>
	<view class="goodsDetail">
		<view class="navbar" v-if="navOpacity!=0" :style="'height:'+navH+'rpx;opacity:'+navOpacity">
			<view class="navbarH" :style="'height:'+navH+'rpx'">
				<view class="navbarCon acea-row row-center-wrapper">
					<view class="header acea-row row-center-wrapper">
						<view :class="item.ifon?'item on':'item'" v-for="(item,index) in navbarArr" :key="index" @click="navHto(item.top)">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="homeTop acea-row row-around row-middle" :style="'top:'+navH/2+'rpx;opacity:'+(1-navOpacity)">
			<view class="iconfont icon-xiangzuo" @click="back"></view>
			<view class="line"></view>
			<navigator open-type="switchTab" url="/pages/index/index" class="pic"><image src="../../static/images/home.png" mode=""></image></navigator>
		</view>
		<view class="container">
			<scroll-view scroll-y="true" @scroll="scroll" style="height: 812px;" :scroll-top="scrollTop" scroll-with-animation>
				<view class="type01" data-name="商品">
					<view class="swiper">
						<swiper indicator-active-color="#fc4141" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500">
							<swiper-item v-for="(item,index) in storeInfo.slider_image" :key="index">
								<image :src="item" mode=""></image>
							</swiper-item>
						</swiper>
					</view>
					<view class="wrapper">
						<view class="share acea-row row-between row-bottom">
							<view class="money">
								￥
								<text class="num">{{storeInfo.price}}</text>
								<text class="vip-money">￥{{storeInfo.vip_price}}</text>
								<image src="../../static/images/vip.png" mode=""></image>
							</view>
							<view class="iconfont icon-fenxiang"></view>
						</view>
						<view class="introduce">{{storeInfo.store_name}}</view>
						<view class="label acea-row row-between-wrapper">
							<view>原价:￥{{storeInfo.ot_price}}</view>
							<view>库存:{{storeInfo.stock}}</view>
							<view>销量:{{storeInfo.fsales}}</view>
						</view>
						<view class="coupon acea-row row-between-wrapper">
							<view class="hide line1 acea-row">
								赠积分：
								<view class="activity">
									赠送 {{storeInfo.give_integral}} 积分
								</view>
							</view>
						</view>
						<view class="coupon acea-row row-between-wrapper" @click="openCoupon">
							<view class="hide line1 acea-row">优惠券：</view>
							<view class="iconfont icon-jiantou"></view>
						</view>
					</view>
				</view>
				<view class="userEvaluation" data-name="评价">
					<view class="title acea-row row-between-wrapper">
						<view>用户评价({{replyCount}})</view>
						<navigator url="" class="praise">
							<text class="font-color">{{replyChance}}%</text>
							好评率
							<text class="iconfont icon-jiantou"></text>
						</navigator>
					</view>
					<userEvaluation v-if="showReply" :evaluationData="reply"></userEvaluation>
				</view>
				<view class="superior" data-name="推荐">
					<view class="title acea-row row-center-wrapper">
						<image src="../../static/images/ling.png" mode=""></image>
						<view class="titleTxt">优品推荐</view>
						<image src="../../static/images/ling.png" mode=""></image>
					</view>
					<view class="slider-banner banner">
						<swiper :indicator-dots="true" indicator-active-color="#fc4141" :autoplay="false" :interval="3000" :duration="500" style="height: 344px;">
							<swiper-item>
								<view class="list acea-row row-middle">
									<navigator :url="'/pages/goods_detail/goods_detail?id='+item.id" class="item" v-for="(item,index) in good_list.list01" :key="index">
										<view class="pic">
											<image :src="item.image" mode=""></image>
										</view>
										<view class="name line1">{{item.store_name}}</view>
										<view class="money">¥{{item.price}}</view>
									</navigator>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="list acea-row row-middle">
									<navigator url="" class="item" v-for="(item,index) in good_list.list02" :key="index">
										<view class="pic">
											<image :src="item.image" mode=""></image>
										</view>
										<view class="name line1">{{item.store_name}}</view>
										<view class="money">¥{{item.price}}</view>
									</navigator>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="list acea-row row-middle">
									<navigator url="" class="item" v-for="(item,index) in good_list.list03" :key="index">
										<view class="pic">
											<image :src="item.image" mode=""></image>
										</view>
										<view class="name line1">{{item.store_name}}</view>
										<view class="money">¥{{item.price}}</view>
									</navigator>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<view class="product-intro" data-name="详情">
					<view class="title">产品介绍</view>
					<rich-text class="conter" :nodes="storeInfo.description"></rich-text>
				</view>
				<view style="height: 120rpx"></view>
			</scroll-view>
			<view class="footer acea-row row-between-wrapper">
				<button type="default" class="item" hover-class="none">
					<view class="iconfont icon-kefu"></view>
					<view>客服</view>
				</button>
				<view class="item" @click="saveHandle">
					<view :class="save?'iconfont  icon-shoucang1':'iconfont icon-shoucang'"></view>
					<view>{{save?'已收藏':'收藏'}}</view>
				</view>
				<navigator url="/pages/cart/cart" class="item" open-type="switchTab">
					<view class="iconfont icon-gouwuche">
						<text class="num">{{cartCount}}</text>
					</view>
					<view>购物车</view>
				</navigator>
				<view class="btn acea-row">
					<view class="joinCart btns" @click="openBtm(1)">加入购物车</view>
					<view class="buy btns" @click="openBtm(2)">立即购买</view>
				</view>
			</view>
		</view>
		<view class="product-bottom" v-if="show">
			<view :class="showAct?'product-window  product-act':'product-window'">
				<view class="textpic acea-row row-between-wrapper">
					<view class="pic"><image :src="prodectData.image" mode=""></image></view>
					<view class="text">
						<view class="line1">{{storeInfo.store_name}}</view>
						<view class="money">
							￥
							<text class="num">{{prodectData.price}}</text>
							<text class="stock">库存: {{prodectData.stock}}</text>
						</view>
					</view>
					<view class="iconfont icon-guanbi" @click="closeBtm"></view>
				</view>
				<view class="productWinList" v-if="showProductAttr">
					<view class="item" v-for="(item,index) in productAttr" :key="index">
						<view class="title">{{item.attr_name}}</view>
						<view class="listn acea-row row-middle">
							<view :class="item02.check?'itemn on':'itemn'" @click="productHandle(item02.attr,item.attr_name)" v-for="(item02,index02) in item.attr_value" :key="index02">{{item02.attr}}</view>
						</view>
					</view>
				</view>
				<view class="cart">
					<view class="title">数量</view>
					<u-number-box :min="1" :max="prodectData.stock" input-height="54" class="carnum" @change="carnumChange"></u-number-box>
				</view>
				<view class="btn btn01" v-if="showMod==1" @click="addCart">加入购物车</view>
				<view class="btn btn02" v-if="showMod==2" @click="go2buy">立即购买</view>
			</view>
			<view class="mask" @click="closeBtm"></view>
		</view>
		<coupon-list-goodsDetail :show="showCoupon" @output="getCoupon" @close="closeCoupon" :productId="productId" ref="coupon"></coupon-list-goodsDetail>
		<home></home>
		<!-- 进度条开始 -->
		<line-progress></line-progress>
		<!-- 进度条结束 -->
	</view>
</template>

<script>
	import api from "../../api/api.js";
	const app = getApp();
	export default{
		data(){
			return{
				id:"",
				navH:app.globalData.navHeight,
				show:false,
				showMod:1,
				showAct:false,
				scrollTop:0,
				scrollH:300, //下滑多少时，头部透明度为1
				navbarArr:[],
				navOpacity:0,
				storeInfo:{ // 商品信息
					price:"",
					vip_price:"",
					store_name:"",
					ot_price:"",
					stock:"",
					fsales:"",
					give_integral:""
				},
				showReply:true, //是否展示评论
				reply:{}, //回复信息
				replyCount:0, //总回复数量
				replyChance:0, // 好评率
				good_list:{}, // 优品推荐
				showProductAttr:true, //是否展示产品参数
				productAttr:[], // 产品参数
				productValue:{}, // 产品参数对应的产品
				prodectData:{}, //选中产品参数对应的产品
				unique:"", // 属性唯一值
				productId:"", // 普通产品编号
				carnum:0,
				cartCount:0, // 购物车数量
				save:false,
				showCoupon:false,// 展示优惠券弹框
			}
		},
		onLoad(e) {
			this.getGoodsDetail(e.id)
		},
		methods:{
			getGoodsDetail:function(id){
				console.log("getGoodsDetail")
				const that = this;
				api.goods.getGoodsDetail(id).then((e)=>{
					let d = e.data.data;
					if(d.status == 200){
						let data = d.data;
						that.storeInfo = data.storeInfo;
						that.showReply = data.reply?true:false;
						that.id = data.storeInfo.id;
						that.save = data.storeInfo.userCollect;
						that.reply = [data.reply];
						that.replyCount = data.replyCount;
						that.replyChance = data.replyChance;
						that.good_list.list01 = data.good_list.slice(0,6);
						that.good_list.list02 = data.good_list.slice(6,12);
						that.good_list.list03 = data.good_list.slice(12);
						that.showProductAttr = JSON.stringify(data.productAttr) == "[]"?false:true;
						that.productValue = data.productValue;
						that.productAttr = that.setProductAttr(data.productAttr);
					}
					this.$refs.coupon.getCoupon(id)
					that.getTotalCartNum()
					setTimeout(function(){that.init();},0)
				})
			},
			init:function(){
				const that = this;
				let query = uni.createSelectorQuery().in(this)
				query.select(".type01").boundingClientRect()
				query.select(".userEvaluation").boundingClientRect()
				query.select(".superior").boundingClientRect()
				query.select(".product-intro").boundingClientRect()
				query.exec(function(res){
					console.log(res,that.navH/2)
					let arr = [];
					for(let i of res){
						let obj = {}
						obj.name = i.dataset.name;
						obj.top = i.top>0?Math.floor(i.top - that.navH/2):i.top;
						obj.ifon = false;
						arr.push(obj);
					}
					that.navbarArr = arr;
				})
			},
			scroll:function(e){
				let arr = this.navbarArr;
				let scrollTop = e.detail.scrollTop;
				let scrollH = this.scrollH;
				// console.log(scrollTop,arr)
				if(scrollTop<scrollH && scrollTop>20){
					let s = scrollTop/scrollH
					this.navOpacity = s.toFixed(2);
				}else if(scrollTop>=scrollH){this.navOpacity = 1;}else{this.navOpacity = 0;}
				for(let i of arr.keys()){
					if(arr[i+1] != undefined){
						if(scrollTop>=arr[i].top&&scrollTop<arr[i+1].top){
							arr[i].ifon = true;
						}else{
							arr[i].ifon = false;
						}
					}else{
						if(scrollTop>=arr[i].top){
							arr[i].ifon = true;
						}else{
							arr[i].ifon = false;
						}
					}
				}
				this.navbarArr = arr;
			},
			setProductAttr:function(data){
				let arr = data;
				for(let j of arr){
					let i = 0;
					for(let k of j.attr_value){
						if(i==0){k.check=true}
						i++;
					}
				}
				this.setProdectData(arr)
				return arr;
			},
			productHandle:function(attr,name){
				let arr = this.productAttr;
				for(let j of arr){
					if(j.attr_name == name){
						for(let k of j.attr_value){
							if(k.attr == attr){k.check = true}else{k.check = false}
						}
					}
				}
				this.productAttr = arr;
				this.setProdectData(arr)
			},
			setProdectData:function(e){
				let v = this.productValue;
				let arr = e;
				let t = "";
				for(let j of arr){
					for(let k of j.attr_value){
						if(k.check){t = t + k.attr + ",";}
					}
				}
				t = t.substring(0,t.length-1);
				if(v[t]){
					this.prodectData = v[t];
					this.unique = v[t].unique;
					this.productId = v[t].product_id;
				}else{
					this.prodectData = {image:"../../static/images/nogoods.png",store_name:"无产品",stock:0,unique:"",product_id:0,price:0}
					this.unique = "";
					this.productId = 0;
				}
			},
			back:function(){
				uni.navigateBack({})
			},
			navHto:function(e){
				this.scrollTop = e==0?e:e+1
			},
			openBtm:function(mod){
				const that = this;
				this.show = true;
				this.showMod = mod;
				setTimeout(function(){that.showAct = true},0)
			},
			closeBtm:function(){
				const that = this;
				this.showAct = false;
				setTimeout(function(){that.show = false},300)
			},
			carnumChange:function(e){
				let num = e.value;
				this.carnum = num;
			},
			addCart:function(){
				const that = this;
				let data = {};
				data.uniqueId = this.unique;
				data.productId = this.productId;
				data.cartNum = this.carnum;
				data.new = 0;
				api.cart.addCart(data).then(e=>{
					console.log(e)
					if(e.status == 200){
						uni.showToast({
							icon:"success",
							title:"添加成功",
							duration:800
						})
						that.closeBtm();
						that.getTotalCartNum()
					}else{
						uni.showToast({
							icon:"loading",
							title:e.msg,
							duration:1000
						})
					}
				})
			},
			go2buy:function(){
				const that = this;
				let data = {};
				data.uniqueId = this.unique;
				data.productId = this.productId;
				data.cartNum = this.carnum;
				data.new = 1;
				api.cart.addCart(data).then(e=>{
					if(e.status == 200){
						uni.navigateTo({
							url:"/pages/pack/order_confirm/order_confirm?id=" + e.data.cartId
						})
						that.closeBtm();
						that.getTotalCartNum()
					}
				})
			},
			saveHandle:function(){
				const that = this;
				let id = this.id;
				if(this.save){
					api.collect.delCollect(id).then(e=>{
						if(e.status == 200){
							that.save = false
						}else{
							uni.showToast({
								icon:"none",
								title:e.msg,
								duration:1000
							})
						}
					})
				}else{
					api.collect.addCollect(id).then(e=>{
						if(e.status == 200){
							that.save = true
						}else{
							uni.showToast({
								icon:"none",
								title:e.msg,
								duration:1000
							})
						}
					})
				}
			},
			getTotalCartNum:function(){ // 获取购物车总数
				const that = this;
				api.cart.getCartCount().then(e=>{
					if(e.status == 200){
						that.cartCount = e.data.count
					}
				})
			},
			getCoupon:function(e){
				this.coupon = e
			},
			openCoupon:function(){
				this.showCoupon = true
			},
			closeCoupon:function(){
				this.showCoupon = false
			}
		}
	}
</script>

<style>
	page{
		font-size: 28rpx;
		background-color: #f5f5f5;
		color: #333;
	}
	.navbar{
		position: fixed;
		background-color: #fff;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
	}
	.navbar .navbarH{
		position: relative;
	}
	.navbar .navbarH .navbarCon{
		position: absolute;
		bottom: 0;
		height: 100rpx;
		width: 100%;
	}
	.navbar .navbarH .navbarCon .header{
		height: 96rpx;
		font-size: 30rpx;
		color: #050505;
		background-color: #fff;
		padding-right: 95rpx;
	}
	.navbar .navbarH .navbarCon .header .item{
		position: relative;
		margin: 0 25rpx;
	}
	.navbar .navbarH .navbarCon .header .item.on::before{
		position: absolute;
		width: 60rpx;
		height: 5rpx;
		background-repeat: no-repeat;
		content: "";
		background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
		bottom: -10rpx;
		left:50%;
		margin-left:-28rpx;
	}
	.homeTop{
		color: #fff;
		position: fixed;
		font-size: 33rpx;
		width: 140rpx;
		height: 54rpx;
		z-index: 100;
		left: 33rpx;
		background: rgba(0, 0, 0, 0.25);
		border-radius: 27rpx;
	}
	.homeTop .iconfont{
		font-size: 28rpx;
		height: 54rpx;
		display: flex;
		align-items: center;
	}
	.homeTop .line{
		width: 2rpx;
		height: 24rpx;
		background: rgba(255, 255, 255, 0.25);
	}
	.homeTop .pic{
		width: 36rpx;
		height: 36rpx;
		margin-top: -6rpx;
	}
	.container .type01 .swiper{
		width: 100%;
		height: 750rpx;
		position: relative;
	}
	.container .type01 .swiper swiper{
		width: 100%;
		height: 100%;
	}
	.container .type01 .wrapper{
		background-color: #fff;
	}
	.container .type01 .wrapper .share{
		margin: 0 30rpx;
		padding-top: 25rpx;
	}
	.container .type01 .wrapper .share .money{
		font-size: 28rpx;
		font-weight: bold;
		color: #fc4141!important;
	}
	.container .type01 .wrapper .share .money .num{
		font-size: 48rpx;
	}
	.container .type01 .wrapper .share .money .vip-money{
		color: #282828;
		margin-left: 13rpx;
	}
	.container .type01 .wrapper .share .money image{
		width: 46rpx;
		height: 21rpx;
		margin-left: 7rpx;
	}
	.container .type01 .wrapper .share .iconfont{
		color: #515151;
		font-size: 40rpx;
		margin-bottom: 10rpx;
	}
	.container .type01 .wrapper .introduce{
		font-size: 32rpx;
		font-weight: bold;
		margin: 23rpx 30rpx 0 30rpx;
	}
	.container .type01 .wrapper .label{
		margin: 0 30rpx;
		font-size: 24rpx;
		color: #82848f;
		margin-top: 22rpx;
	}
	.container .type01 .wrapper .coupon{
		padding: 0 30rpx;
		border-top: 1rpx solid #f5f5f5;
		margin-top: 25rpx;
		height: 80rpx;
		font-size: 26rpx;
		color: #82848f;
	}
	.container .type01 .wrapper .coupon:last-of-type{
		margin-top: 0rpx;
	}
	.container .type01 .wrapper .coupon .hide{
		width: 540rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	.container .type01 .wrapper .coupon .hide .activity{
		height: 40rpx;
		padding: 0 20rpx;
		border: 1rpx solid #f2857b;
		color: #e93323;
		font-size: 24rpx;
		line-height: 40rpx;
		position: relative;
		margin: 19rpx 0 19rpx 15rpx;
	}
	.container .type01 .wrapper .coupon .hide .activity::before{
		content: ' ';
		position: absolute;
		width: 7rpx;
		height: 10rpx;
		border-radius: 0 7rpx 7rpx 0;
		border: 1rpx solid #f2857b;
		background-color: #fff;
		bottom: 50%;
		left: -1rpx;
		margin-bottom: -5rpx;
		border-left-color: #fff;
	}
	.container .type01 .wrapper .coupon .hide .activity::after{
		content: ' ';
		position: absolute;
		width: 7rpx;
		height: 10rpx;
		border-radius: 7rpx 0 0 7rpx;
		border: 1rpx solid #f2857b;
		background-color: #fff;
		right: -1rpx;
		bottom: 50%;
		margin-bottom: -5rpx;
		border-right-color: #fff;
	}
	.container .type01 .wrapper .coupon .iconfont{
		color: #7a7a7a;
		font-size: 28rpx;
	}
	.container .userEvaluation{
		margin-top: 20rpx;
		background-color: #fff;
	}
	.container .userEvaluation .title{
		height: 86rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
		margin-left: 30rpx;
		padding-right: 30rpx;
	}
	.container .userEvaluation .title .praise{
		font-size: 28rpx;
		color: #808080;
	}
	.container .userEvaluation .title .praise .font-color{
		color: #fc4141!important;
	}
	.container .userEvaluation .title .praise .iconfont{
		color: #7a7a7a;
		font-size: 28rpx;
		vertical-align: 1rpx;
		margin-left: 8rpx;
	}
	.container .superior{
		background-color: #fff;
		margin-top: 20rpx;
		padding-bottom: 10rpx;
	}
	.container .superior .title{
		height: 98rpx;
	}
	.container .superior .title image{
		width: 30rpx;
		height: 30rpx;
	}
	.container .superior .title .titleTxt{
		margin: 0 20rpx;
		font-size: 30rpx;
		background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.container .superior .slider-banner{
		width: 690rpx;
		margin: 0 auto;
		position: relative;
	}
	.container .superior .slider-banner swiper{
		width: 100%;
		height: 100%;
	}
	.container .superior .slider-banner swiper .list{
		width: 100%;
	}
	.container .superior .slider-banner swiper .list .item{
		width: 215rpx;
		margin: 0 22rpx 30rpx 0;
		font-size: 26rpx;
	}
	.container .superior .slider-banner swiper .list .item:nth-child(3n){
		margin: 0 0rpx 30rpx 0;
	}
	.container .superior .slider-banner swiper .list .item .pic{
		width: 100%;
		height: 215rpx;
		position: relative;
	}
	.container .superior .slider-banner swiper .list .item .pic image{
		border-radius: 6rpx;
	}
	.container .superior .slider-banner swiper .list .item .name{
		color: #282828;
		margin-top: 12rpx;
	}
	.container .superior .slider-banner swiper .list .item .money{
		color: #fc4141!important;
	} 
	.container .product-intro{
		margin-top: 20rpx;
	}
	.container .product-intro .title{
		font-size: 30rpx;
		color: #282828;
		height: 86rpx;
		width: 100%;
		background-color: #fff;
		text-align: center;
		line-height: 86rpx;
	}
	.container .product-intro .conter{
		width: 100%;
		overflow: hidden;
		min-height: 100vh;
	}
	.container .footer{
		padding: 0 20rpx 0 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		height: 100rpx;
		background-color: #fff;
		z-index: 99;
		border-top: 1rpx solid #f0f0f0;
	}
	.container .footer .item{
		font-size: 18rpx;
		color: #666;
		padding: 0;
		margin: 0;
		line-height: normal;
		background-color: #fff;
		position: relative;
	}
	.container .footer .item::after,.container .footer .item::before{
		display: none;
	}
	.container .footer .item .iconfont{
		text-align: center;
		font-size: 40rpx;
	}
	.container .footer .item{
		font-size: 18rpx;
		color: #666;
	}
	.container .footer .icon-gouwuche1{
		font-size: 40rpx;
		position: relative;
	}
	.container .footer .item .iconfont .num{
		color: #fff;
		position: absolute;
		font-size: 18rpx;
		padding: 2rpx 8rpx 3rpx;
		border-radius: 200rpx;
		top: -10rpx;
		right: -10rpx;
		background-color: #e93323!important;
	}
	.container .footer .btn{
		width: 444rpx;
		height: 76rpx;
	}
	.container .footer .btn .joinCart{
		border-radius: 50rpx 0 0 50rpx;
		background-image: linear-gradient(to right,#fea10f 0%,#fa8013 100%);
	}
	.container .footer .btn .btns{
		width: 222rpx;
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 28rpx;
	}
	.container .footer .btn .buy{
		border-radius: 0 50rpx 50rpx 0;
		background-image: linear-gradient(to right,#fa6514 0%,#e93323 100%);
	}
	.container .footer .item .icon-shoucang1{
		color: #f00;
	}
	.product-bottom{
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 100;
	}
	.product-bottom .product-window{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		background-color: #fff;
		z-index: 6;
		border-radius: 16rpx 16rpx 0 0;
		/* padding-bottom: 140rpx; */
		transform: translate3d(0,100%,0);
		transition: all .3s cubic-bezier(.25,.5,.5,.9);
	}
	.product-bottom .product-window.product-act{
		transform: translate3d(0,0,0);
	}
	.product-bottom .product-window .textpic{
		padding: 0 130rpx 0 30rpx;
		margin-top: 29rpx;
		position: relative;
	}
	.product-bottom .product-window .textpic .pic{
		width: 150rpx;
		height: 150rpx;
	}
	.product-bottom .product-window .textpic .pic image{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.product-bottom .product-window .textpic .text{
		width: 410rpx;
		font-size: 32rpx;
		color: #202020;
	}
	.product-bottom .product-window .textpic .text .money{
		font-size: 24rpx;
		margin-top: 40rpx;
		color: #fc4141!important;
	}
	.product-bottom .product-window .textpic .text .money .num{
		font-size: 36rpx;
	}
	.product-bottom .product-window .textpic .text .money .stock{
		color: #999;
		margin-left: 18rpx;
	}
	.product-bottom .product-window .textpic .iconfont{
		position: absolute;
		right: 30rpx;
		top: -5rpx;
		font-size: 35rpx;
		color: #8a8a8a;
	}
	.product-bottom .product-window .productWinList{
		max-height: 395rpx;
		overflow: auto;
		margin-top: 36rpx;
	}
	.product-bottom .product-window .productWinList .item:first-of-type{
		margin-top: 0rpx;
	}
	.product-bottom .product-window .productWinList .item{
		margin-top: 36rpx;
	}
	.product-bottom .product-window .productWinList .item .title{
		font-size: 30rpx;
		color: #999;
		padding: 0 30rpx;
	}
	.product-bottom .product-window .productWinList .item .listn{
		padding: 0 30rpx 0 16rpx;
	}
	.product-bottom .product-window .productWinList .item .listn .itemn{
		border: 1px solid #bbb;
		font-size: 26rpx;
		color: #282828;
		padding: 7rpx 33rpx;
		border-radius: 6rpx;
		margin: 14rpx 0 0 14rpx;
	}
	.product-bottom .product-window .productWinList .item .listn .itemn.on{
		color: #fff;
		background-color: #ff3700;
		border-color: #ff3700;
	}
	.product-bottom .product-window .cart{
		margin-top: 36rpx;
		padding: 0 30rpx;
	}
	.product-bottom .product-window .cart .title{
		font-size: 30rpx;
		color: #999;
	}
	.product-bottom .product-window .cart .carnum{
		margin-top: 24rpx;
		display: block;
	}
	.product-bottom .product-window .btn{
		width: 690rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 32rpx;
		margin: 24rpx auto;
	}
	.product-bottom .product-window .btn.btn01{
		background-image: linear-gradient(to right,#fea10f 0%,#fa8013 100%);
	}
	.product-bottom .product-window .btn.btn02{
		background-image: linear-gradient(to right,#fa6514 0%,#e93323 100%)
	}
	.product-bottom .mask{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #000;
		opacity: 0.5;
		z-index: 5;
	}
</style>
